<template>
  <!-- prettier-ignore -->
  <div class="service-select gap-col-16">
    <div class="font-size-12 font-weight-500 line-height-120 text-graydisabled text-center">
      {{ $t('info.helpfulTemplateToNext') }}
    </div>
    <div class="btns gap-col-8">
      <button :class="dickEvalStyle" @click="select(SERVICE_TYPE.DICK_EVAL)">{{ SERVICE_NAME[SERVICE_TYPE.DICK_EVAL] }}</button>
      <button :class="nameOnBodyStyle" @click="select(SERVICE_TYPE.NAME_ON_BODY)">{{ SERVICE_NAME[SERVICE_TYPE.NAME_ON_BODY] }}</button>
      <button :class="jOIStyle" @click="select(SERVICE_TYPE.JOI)">{{ SERVICE_NAME[SERVICE_TYPE.JOI] }}</button>
      <button :class="eatingStyle" @click="select(SERVICE_TYPE.EATING)">{{ SERVICE_NAME[SERVICE_TYPE.EATING] }}</button>
      <button :class="cosStyle" @click="select(SERVICE_TYPE.COS)">{{ SERVICE_NAME[SERVICE_TYPE.COS] }}</button>
      <button :class="custVideoStyle" @click="select(SERVICE_TYPE.CUST_VIDEO)">{{ SERVICE_NAME[SERVICE_TYPE.CUST_VIDEO] }}</button>
      <button :class="programStyle" @click="select(SERVICE_TYPE.PROGRAM)">{{ SERVICE_NAME[SERVICE_TYPE.PROGRAM] }}</button>
    </div>
  </div>
</template>

<script setup>
import { computed, onActivated, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { SERVICE_NAME, SERVICE_TYPE } from '@/constant/publish'

const selected = ref(null)

useConfirmData(() => selected.value)

const { content } = storeToRefs(usePopupDialogStore())

const dickEvalStyle = computed(() => (selected.value === SERVICE_TYPE.DICK_EVAL ? 'primary-btn' : 'hollow-btn'))
const nameOnBodyStyle = computed(() => (selected.value === SERVICE_TYPE.NAME_ON_BODY ? 'primary-btn' : 'hollow-btn'))
const jOIStyle = computed(() => (selected.value === SERVICE_TYPE.JOI ? 'primary-btn' : 'hollow-btn'))
const eatingStyle = computed(() => (selected.value === SERVICE_TYPE.EATING ? 'primary-btn' : 'hollow-btn'))
const cosStyle = computed(() => (selected.value === SERVICE_TYPE.COS ? 'primary-btn' : 'hollow-btn'))
const custVideoStyle = computed(() => (selected.value === SERVICE_TYPE.CUST_VIDEO ? 'primary-btn' : 'hollow-btn'))
const programStyle = computed(() => (selected.value === SERVICE_TYPE.PROGRAM ? 'primary-btn' : 'hollow-btn'))

onActivated(() => {
  selected.value = content.value
})

function select(v) {
  selected.value = v
}
</script>

<style lang="scss" scoped>
.service-select {
  display: flex;
  flex-direction: column;

  .btns {
    display: flex;
    flex-direction: column;

    button {
      width: 100%;
      height: 2.5rem;
      border-radius: 0.625rem;
    }
  }
}
</style>
